<template>
<div class="kui-content-wrap">
     <div class='kui-wrap-desk kui-flex kui-flex-between kui-flex-middle'>
      <Breadcrumb class='kui-desk-nav kui-flex-row-none'>
        <BreadcrumbItem>我的工作台</BreadcrumbItem>
        <BreadcrumbItem to="/system/region">分类列表</BreadcrumbItem>
        <BreadcrumbItem>分类添加</BreadcrumbItem>
      </Breadcrumb>
    </div>
    <div class="kui-wrap-body admin-addlist">
      <div class="kui-body-section kui-table-panel">
          <Form class="kui-form" :model="formData" :label-width="80" :rules="ruleValidate" style="background:#fff; padding:30px;">
        <FormItem label="名称"  prop="name">
          <Input v-model="formData.name" placeholder="请输入" style="width: 300px;"/>
        </FormItem>
        <FormItem label="状态标识" style="width: 320px;">
          <Select v-model="formData.type" disabled>
              <Option :value="1">分类</Option>
              <Option :value="2">区域</Option>
          </Select>
        </FormItem>
        <FormItem label="备注" >
          <Input v-model="formData.info" placeholder="请输入" style="width: 300px;" />
        </FormItem>
        <Form-item>
          <Button type="primary" @click="addBtn">确认添加</Button>
        </Form-item>
      </Form>
      </div>
    </div>
    
    </div>

</template>

<script>
  export default {
    // 默认数据
    data() {
      return {
        formData: {
        name: null,
        info: null,
        type: 1
        },
        ruleValidate: {
                    name: [
                        { required: true, message: '请输入名称', trigger: 'blur' }
                    ]
                }
      }
    },
    methods:  {
      // 添加数据
      async postAddData() {
        const app = this
        let { data } = await app.$axios.post('/master/v1/cate',app.formData)
        if (data.code === 100) {
          app.$Message.success('新增成功')
          app.formData = {}
          app.$router.go(-1)
          this.formData = {}
        }else{
           app.$Message.error( data.msg )
        }
      },
      //添加按钮
      addBtn() {
        const app = this
        app.$Modal.confirm({
        title: '确认添加',
        content: '您确认添加么？',
        okText: '添加',
        loading: true,
        onOk: () => {
         app.postAddData()
         app.$Modal.remove()
        }
        
      })
      }
    }
  }
</script>

<style  lang="less">
 .admin-addlist .ivu-input{
   width: 20em;
 }
  
</style>
